<template>
	<div class="modal-container">
		<el-dialog title="运费设置" width="1200px" custom-class="modal-record " :close-on-click-modal="false"
			:visible.sync="show" :before-close="on_before_close" @closed="on_closed">

			<div class="modal-inner">
				<div class="modal-ctx">
					<div class="input-box flex">
						<div class="label">标题</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.title" placeholder="标题"> </el-input>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">计费依据</div>
						<div class="input-item">
							<el-radio-group v-model="form.accordby">
								<el-radio :label="1">按数量</el-radio>
								<el-radio :label="2">按重量</el-radio>
							</el-radio-group>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">是否开启运费满减</div>
						<div class="input-item">
							<el-radio-group v-model="form.if_man">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</div>
					</div>
					<div class="panel-box" v-if="form.if_man == 1">
						<div class="input-box flex">
							<div class="label">运费满减需达到金额值</div>
							<div class="input-item">
								<el-input clearable type="text" v-model="form.man" placeholder="目标金额"> </el-input>
							</div>
						</div>
						<div class="input-box flex">
							<div class="label">运费满减类型</div>
							<div class="input-item">
								<el-radio-group v-model="form.mantype">
									<el-radio :label="1">减免全部运费</el-radio>
									<el-radio :label="2">减免基础运费</el-radio>
								</el-radio-group>
							</div>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">规则内容</div>
						<div class="input-item">

						</div>
					</div>
					<div class="express-rule-container">
						<div class="express-rule">
							<div class="loop-wrap">

								<div class="table-sec">
									<el-table :data="rule_list" stripe border>
										<el-table-column prop="base" :label="form.accordby == 1 ? '基础数量' : '基础单位重量'"
											width="auto">
											<template slot-scope="scope">
												<div class="id-text">
													<el-input v-model="scope.row.base" type="number"> </el-input>
												</div>
											</template>
										</el-table-column>

										<el-table-column prop="basePrice" label="基础运费X元" width="auto">
											<template slot-scope="scope">
												<div class="id-text">
													<el-input v-model="scope.row.basePrice" type="number"> </el-input>
												</div>
											</template>
										</el-table-column>

										<el-table-column prop="base" :label="form.accordby == 1 ? '每增加X数量' : '每增加X单位重量'"
											width="auto">
											<template slot-scope="scope">
												<div class="id-text">
													<el-input v-model="scope.row.addNum" type="number"> </el-input>
												</div>
											</template>
										</el-table-column>

										<el-table-column prop="basePrice" label="需增加运费X元" width="auto">
											<template slot-scope="scope">
												<div class="id-text">
													<el-input v-model="scope.row.addPrice" type="number"> </el-input>
												</div>
											</template>
										</el-table-column>

										<el-table-column prop="content" label="备注" width="auto">
											<template slot-scope="scope">
												<div class="id-text">
													<el-input v-model="scope.row.content"> </el-input>
												</div>
											</template>
										</el-table-column>

										<el-table-column prop="basePrice" label="生效地区" width="auto">
											<template slot-scope="scope">
												<div class="id-text">
													{{ scope.row.areaNames }}
												</div>
											</template>
										</el-table-column>

										<el-table-column fixed="right" label="操作" width="150">
											<template slot-scope="scope">
												<div data-title="列表操作" class="row-actions-box">
													<el-button @click="do_row_remove(scope.row, scope)"
														type="text">删除</el-button>
													<el-button @click="do_row_set_area(scope.row, scope)"
														type="text">设置生效地区</el-button>
												</div>
											</template>
										</el-table-column>
									</el-table>

									<div class="loop-add">
										<el-button type="primary" @click="do_row_add()"> 增加组 </el-button>
									</div>
								</div>
							</div>
						</div>

					</div>

				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="" @click="show = false">取消</el-button>
				<el-button type="primary" @click="do_submit()">确认</el-button>
			</span>
		</el-dialog>


		<el-dialog title="设置生效地区" width="800px" custom-class="modal-record " :close-on-click-modal="false"
			:visible.sync="show_area" :before-close="on_before_close_area" @closed="on_closed_area">
			<div class="modal-inner">
				<div class="modal-ctx">
					<div class="input-box flex">
						<!-- <div class="label">选择省份</div> -->
						<div class="input-item area-select-wrap">
							<el-checkbox v-model="is_checkAll" @change="handleCheckAllChange">全选</el-checkbox>
						</div>
					</div>

					<div class="input-box flex">
						<!-- <div class="label">选择省份</div> -->
						<div class="input-item area-select-wrap">
							<el-checkbox-group v-model="province_select_items" @change="on_change_select_items">
								<el-checkbox v-for="(item, index) in province_list"
									:disabled="province_select_id_map[item.id]" :key="item.id" :label="item.id">
									{{ item.name }}
								</el-checkbox>
							</el-checkbox-group>
						</div>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="" @click="show_area = false">取消</el-button>
				<el-button type="primary" @click="do_submit_area()">确认</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {
	mapState
} from "vuex";

export default {
	name: "modal-hetong",
	components: {

	},
	data() {
		return {
			show: false,
			info: {},
			form: {
				"id": "",
				"title": "",
				"accordby": 1, //1-按数量 2-按重量
				"rules": "",
				"if_man": 0, //是否开启满减 1-开启 0-关闭
				"man": "",
				"mantype": "" //减免 1-全部运费 2-基础运费
			},

			rule_list: [
				{
					"areaNames": "",
					"areaIds": "",
					"base": "",
					"basePrice": "",
					"addNum": "",
					"addPrice": "",
					"content": ""
				},
				// {
				// 	"id": "",
				// 	"areaNames": "西藏省,新疆省",
				// 	"areaIds": "154,165",
				// 	"base": "1",
				// 	"basePrice": "15",
				// 	"addNum": "2",
				// 	"addPrice": "22",
				// 	"content": "111111111"
				// },
			],

			//
			active_index_for_area: 0,
			active_row_for_area: {},
			show_area: false,
			province_list: [],
			province_select_items: [],
			province_select_id_map: {},

			is_checkAll: false,

			province_id_to_name_map: {},
			province_name_to_id_map: {},
			total_province_number: 0
		};
	},
	computed: {},
	watch: {
		// province_select_items(value) {
		// 	this.$log('已选地区', value)
		// }
	},
	created() {
		this.query_area()
	},
	methods: {
		init(row) {
			this.info = row || {}
			this.show = true;

			if (row) {
				this.query_expree_detail()
			}
		},

		query_expree_detail() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "yunfei_getInfo",
					id: this.info.id,
				}
			}).then(res => {
				if (res.code == 200) {
					let data = res.data;

					this.form = {
						"id": data.id,
						"title": data.title,
						"accordby": data.accordby,
						"rules": JSON.stringify(data.rules),
						"if_man": data.if_man,
						"man": data.man,
						"mantype": data.mantype,
					}

					if (data.rules && data.rules.length) {
						this.rule_list = data.rules
					}
				}
			})
		},


		on_before_close() {
			this.show = false;
		},
		on_closed() {
			this.form = {
				"id": "",
				"title": "",
				"accordby": 1, //1-按数量 2-按重量
				"rules": "",
				"if_man": 0, //是否开启满减 1-开启 0-关闭
				"man": "",
				"mantype": "" //减免 1-全部运费 2-基础运费
			}

			this.rule_list = [];


			this.province_select_items = [];
		},
		do_submit() {
			if (!this.form.title) {
				alertErr("请填写标题");
				return;
			}
			// if (!this.form.invoiceRemark) {
			// 	alertErr("请填写开票备注");
			// 	return;
			// }		
			let rule_list = this.rule_list.filter(v => v.base || v.basePrice)
			if (!rule_list.length) {
				alertErr("请设置运费规则");
				return;
			}
			this.form.rules = JSON.stringify(rule_list)


			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "yunfei_save",
					...this.form
				}
			}).then(res => {
				alertErr(res.msg)
				if (res.code == 200) {
					this.$emit('confirm')
					this.show = false
				}
			})

		},

		do_row_remove(row, scope) {
			this.rule_list.splice(scope.$index, 1)
		},
		do_row_add() {
			this.rule_list.push({
				"areaNames": '',
				"areaIds": '',
				"base": '',
				"basePrice": '',
				"addNum": '',
				"addPrice": '',
				"content": '',
			})
		},



		//设置运费规则地区
		do_row_set_area(row, scope) {
			this.show_area = true;
			this.active_row_for_area = row;
			this.active_index_for_area = scope.$index;

			console.log('$index', scope.$index)

			if (row.areaIds === 0 || row.areaIds === '0') {
				this.province_select_items = Object.keys(this.province_id_to_name_map).map(v => parseInt(v));
				this.is_checkAll = true;
			} else if (row.areaIds) {
				this.province_select_items = row.areaIds.split(',').map(v => parseInt(v))
			}
		},
		query_area() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "setting_getArea",
					parentId: 0,
				}
			}).then(res => {
				if (res.code == 200) {
					let data = res.data;
					this.province_list = data;
					let province_id_to_name_map = {}
					let province_name_to_id_map = {}

					this.province_list.forEach(item => {
						let {
							id,
							name
						} = item

						province_id_to_name_map[id] = name;
						province_name_to_id_map[name] = id;
					})

					this.province_id_to_name_map = province_id_to_name_map;
					this.province_name_to_id_map = province_name_to_id_map;
					this.total_province_number = this.province_list.length
				}
			})
		},

		do_submit_area() {
			if (!this.is_checkAll && !this.province_select_items.length) {
				alertErr("请选择生效地区");
				return
			}

			if (this.is_checkAll) {
				this.active_row_for_area.areaIds = 0;
				this.active_row_for_area.areaNames = '通用';
			} else {

				let name_arr = []
				this.province_select_items.forEach(id => {
					name_arr.push(this.province_id_to_name_map[id])
				})

				this.active_row_for_area.areaIds = this.province_select_items.join(',');
				this.active_row_for_area.areaNames = name_arr.join(',');
			}

			this.show_area = false
		},

		on_before_close_area() {

		},
		on_closed_area() {

		},

		handleCheckAllChange(value) {
			console.log('全选', value)

			if (value) {
				this.province_select_items = Object.values(this.province_name_to_id_map)
			} else {
				this.province_select_items = []
			}
		},

		on_change_select_items(value) {
			this.$log('切换勾选', value)

			if (value.length != this.total_province_number) {
				this.is_checkAll = false;
			} else {
				this.is_checkAll = true;
			}
		}
	},
};
</script>

<style scoped lang="less">
/deep/ .modal-record {
	// margin-top: 80px !important;


	.modal-inner {
		padding: 0;
	}

	.el-dialog__header {
		.flex-between();
		border-bottom: 1px solid #eee;
		background: #a98c4d;
		background: #f7f7f7;
		height: 60px;
		line-height: 60px;
		padding: 0 20px;
		font-size: 18px;
		color: #333;

		.el-dialog__title {
			color: #000;
		}

		.el-dialog__headerbtn {

			// top: 0;
			.el-dialog__close {
				color: #000;
				font-size: 20px;
				font-weight: bold;
			}
		}
	}

	.el-dialog__body {
		padding: 0;
	}

	.el-dialog__footer {
		text-align: center;
	}
}

.modal-ctx {
	padding: 30px 50px;
	max-height: 60vh;
	overflow-y: auto;
	border-bottom: 1px solid #ddd;

	.tip {
		margin-bottom: 20px;
		color: #444;
		font-size: 14px;
	}

	.input-box {
		margin-bottom: 15px;
		position: relative;

		&.flex {
			display: flex;
			align-items: flex-start;
			// align-items: center;

			.label {
				margin-bottom: 0;
			}
		}

		.label {
			min-width: 80px;
			min-width: 120px;
			min-width: 150px;
			// margin-right: 20px;
			margin-bottom: 20px;
			font-size: 14px;
			color: #6e7285;
		}

		.input-item {
			flex: 1;
			display: flex;
			align-items: center;


			.el-input {
				width: 220px;
				width: 100%;
			}

			.el-select {
				width: 100%;
			}
		}
	}
}

.btn-send {}


.area-select-wrap {
	/deep/ .el-checkbox__label {
		min-width: 70px;
		margin-bottom: 5px;
	}
}
</style>